<html>
<head>
  <link rel="stylesheet" href="../../lay/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../lay/style/admin.css" media="all">
  <link rel="stylesheet" href="../../lay/style/yogee.css" media="all">
  <script src="../../lay/layui/layui.js"></script>
  <style>
    .hide{display:none}
  </style>
</head>
<body>
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
      <form class="layui-form-item">

        <div class="layui-inline">
          <button class="layui-btn layuiadmin-btn-list up-all" type="button">全部收起</button>
          <button class="layui-btn layuiadmin-btn-list down-all" type="button">全部展开</button>
          <a class="layui-btn layuiadmin-btn-list layui-btn-normal export"
             href="/page/depart/departForm.html">新增</a>
        </div>
      </form>
    </div>
    <div class="layui-card-body">
      <table id="table" class="layui-table layui-form" lay-filter="table"></table>
    </div>
  </div>
</div>
<script src="../../util/httpUtil.js"></script>
<script src="../../util/moment.min.js"></script>
<script type="text/javascript">
  layui.config({
    base: '../../lay'
  }).extend({
    treetable: '/lib/extend/treetable'
  }).use([ 'jquery', 'form','treetable', 'layer'], function () {
    var $ = layui.$;
    var layer = layui.layer; //弹层
    var treetable = layui.treetable;
    var form = layui.form;

    HTTPUtil.post('/yl/ylDepartment/list', {})
            .then(function (json) {
              if (json.state === 'success') {
                treetable.render({
                  elem: '#table',// 必须
                  data: json.data,
                  field : 'name',// 必须
                  is_checkbox: false,
                  space : 4,
                  cols: [
                    {
                      field: 'name',
                      title: '部门名称',
                      template: function(item){
                        if(item.levels == "1"){
                          return '&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#034d6a;">'+item.name+'</span>';
                        }
                        if(item.levels == "2"){
                          return '&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#26a2e6;">'+item.name+'</span>';
                        }
                        return item.name;
                      }
                    },
                    {
                      field: 'leaderName',
                      title: '部门主管',
                    },
                    {
                      field: 'actions',
                      title: '操作',
                      width: '30%',
                      template: function(item){
                        var tem = [];
                        if(item.pid == 0){
                          tem.push('<a class="add-child" lay-filter="add">添加子级</a>');
                        }
                        tem.push('<a lay-filter="edit">编辑</a>');
                        tem.push('<a lay-filter="del">删除</a>');
                        return tem.join(' <font>|</font> ')
                      },
                    },
                  ]
                });
              } else {
                layer.msg(json.msg,{icon: 2});
              }
            });

    treetable.on('treetable(add)',function(data){
      layer.msg('添加操作');
    });

    treetable.on('treetable(edit)',function(data){
      window.location.href = 'departForm.html?id=' + data.item.id;
    });

    treetable.on('treetable(del)',function(data){
      layer.confirm('确定要删除吗', function (index) {
        layer.close(index);
        //向服务端发送删除指令
        HTTPUtil.post('/yl/ylDepartment/del', {departId: data.item.id})
            .then(function (json) {
              if (json.state === 'success') {
                layer.msg('删除成功', {icon: 1, time: 1000});
                window.location.href = 'departList.html';
              } else {
                layer.msg(json.msg, {icon: 2});
              }
            })
      });
    });

    $('.up-all').click(function(){
      treetable.all('up');
    });

    $('.down-all').click(function(){
      treetable.all('down');
    });

    form.on('switch(status)',function(data){
      layer.msg('监听状态操作');
    })

  });
</script>
</body>
</html>
